﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>MERCHANT CENTER</title>
		<%@ include file="/share/include.jsp" %>
		<!-- <script src="js/jquery.min.js"></script> -->
   		 <meta name="viewport" content="width=device-width, initial-scale=1">
		 <script type="application/x-javascript"> 
			addEventListener("load", function() { 
				setTimeout(hideURLbar, 0); 
			}, false); 
			function hideURLbar(){ 
				window.scrollTo(0,1); 
			} 
		</script>
			<link href='${root }/css/fullcalendar.css' rel='stylesheet' />
			<link href='${root }/css/fullcalendar.print.css' rel='stylesheet' media='print' />
			<script src='${root }/js/moment.min.js'></script>
			<script src='${root }/js/fullcalendar.min.js'></script>
			<script>
			
				$(document).ready(function() {
					var nowDate = currentYMD();
					$('#calendar').fullCalendar({
						/**
						header: {
							left: 'prev,next today',
							center: 'title',
							right: 'month,agendaWeek,agendaDay'
						},
						*/
						defaultDate: nowDate,
						selectable: true,
						selectHelper: true,
						select: function(start, end) {
							//设置繁忙的日期
							var date = start.format();
							//判断两个日期的大小
							if(dateCompare(nowDate,date) != 1){
								art.dialog({
									width: 250,
									height: 100,
									fixed: true,
								    padding: 0,
								    title: "Prompt",
								    content: "Whether to set<font style='color:red'> "+date+" </font>Daily work busy?",
								    lock: true,
								    button: [{
									    name: "submit",
									    callback: function () {
									    	var title = 'Busy';
											var eventData;
											//ajax添加繁忙记录(添加的时候进行校验,是否已经存在工作状态记录,已经存在,则不再添加)
											$.ajax({
												type:"post",
												url:'${root}/control/calendar/calendarController/addCalendar.do',
												dataType:"json",
												data:{
													"date":date,
													"shopId":'${shop.shopId}'
												},
												async: false,//false同步,true异步
												success:function(data){
													if(data.status == true){
														artDalog("Prompt","Set the working state of success",null);
														//页面展示繁忙状态(不刷新页面,只添加一个状态显示,在切换日期重新加载状态的时候,要先情况状态,将此类显示去除,避免重复显示)
														eventData = {
															id: data.id,
															url:'javascript:removeEvents('+data.id+');',
															title: title,
															start: start,
															end: end
														};
														$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
													}else{
														artDalog("Prompt","The day has set working state",null);
													}
												}
											}); 
									    },
								        focus: true
								     },
								     {
								        name: "Cancel"
								     }]
								});
								$('#calendar').fullCalendar('unselect');
							}else{
								//artDalog("Prompt","<font style='color:red;font-size:16px;'>Time past cannot be set status!</font>",null);
							}
						},
						editable: true,
						eventLimit: true, // allow "more" link when too many events
						events: function(start, end, timezone, callback) {
							//清楚现有的状态显示,然后重新加载状态显示(否则存在多显示记录条数)
							$('#calendar').fullCalendar( 'removeEvents');
							//获取当前日期(此日期是当前日历上的日期,如果是本月,则是系统日期,如果非本月,则获取该月的第一日)
							 var moment = $('#calendar').fullCalendar('getDate');
							//设置查询日期(截取日期)
							var searchDate = moment.format().substring(0,10);
							//alert(searchDate);
							//异步加载日历信息
					        $.ajax({
					            url: '${root}/control/calendar/calendarController/calendarList.do?shopId=${shop.shopId}&searchDate='+searchDate,
					            dataType: 'json',
					            data: {
					                // our hypothetical feed requires UNIX timestamps
					                start: start.unix(),
					                end: end.unix()
					            },
					            success: function(doc) {
					                var events = [];
					                $(doc).each(function() {
					                //判断是否是已经过期的状态,过期的状态不允许删除
					                	if(dateCompare(nowDate,$(this).attr('date')) != 1){
						                	events.push({
						                    	id: $(this).attr('id'),
						                    	url:'javascript:removeEvents('+$(this).attr('id')+');',
						                        title: 'Busy',
						                        start: $(this).attr('date') // will be parsed
						                    });
					                	}else{
					                		events.push({
						                    	id: $(this).attr('id'),
						                    	//url:'javascript:removeEvents('+$(this).attr('id')+');',
						                        title: 'Busy',
						                        start: $(this).attr('date') // will be parsed
						                    });
					                	}
					                });
					                callback(events);
					            }
					        });
					    }
					});
					
				});
				
				/**
				*根据主键删除events事件
				*objId(要删除的对象数据主键)
				*/
				function removeEvents(objId){
					//var evId = replaceAll(dateStr,"-", "");
					art.dialog({
						width: 250,
						height: 100,
						fixed: true,
					    padding: 0,
					    title: "Prompt",
					    content: "Whether to cancel the job busy?",
					    lock: true,
					    button: [{
						    name: "Confirm",
						    callback: function () {
						    	$.ajax({
									type:'post',
									url:'${root}/control/calendar/calendarController/deleteCalendar.do',
									dataType:'json',
									data:{
										"calendarId":objId
									},
									async: false,//false同步,true异步
									success:function(data){
										if(data.status == true){
											artDalog("Prompt","Cancel "+data.date+" the working state of success",null);
											$('#calendar').fullCalendar( 'removeEvents' ,objId );
										}
									}
								});
						    },
					        focus: true
					     },
					     {
					        name: "Cancel"
					     }]
					});
				};
			</script>
	</head>
	<body>
		<!-- container -->
		<!-- header -->
		<div class="header">
			<%@ include file="/control/jsp/layout/header.jsp" %>
			<!-- /bottom-header -->
		</div>
		<!-- header -->
		<!--- top-nav -->
			<%@ include file="/control/jsp/layout/sellerMenu.jsp" %>
		<!--- top-nav -->
		<!-- Product-Details-page -->
		<div class="details-page">
			<div class="content details-page">
				<div class="product-details">
					<div class="container">
						<div class="details-left" style="width: 100%;">
						    <h4 style="color:red;"><img style="padding: 10px;" src="${root}/images/bx.gif" />Working calendar</h4>
						    <div id='calendar'></div>
						</div>
						<div class="clearfix"> </div>
					</div>
			    </div>
		    </div>
		</div>
		<!-- /Product-Details-page -->
		<!-- footer -->
		<%@ include file="/control/jsp/layout/footer.jsp" %>
</body>
</html>

